<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同步与异步</title>
</head>
<body>

    <button id="btn">点击</button>

     <!-- 
        同步：
            当前调用发出之后在没有得到结果之后后续代码不能执行、一直处在等待状态，
            同步是阻塞的。
            执行是一步一步的执行  前边步骤没有结束 后边得阻塞等待
            独木桥
            
        异步：
            当前调用发出之后在没有得到结果之前后续代码可以执行，
            当前调用的结果会以回调函数方式来告诉调用者，
            异步是非阻塞的。
            双向6车道  

    -->
    
    <script>

        // ============模拟同步==================

        // console.log("111");
        // function fn() {
        //     console.log("222");
        //     alert('我是同步代码，回阻塞后面的代码执行')
        // }
        // fn()
        // console.log("333");



          // ============模拟异步==================
        //   console.log("111");
        //     function fn() {
        //         console.log("222");
        //         // 宏任务
        //         setTimeout(() => {
        //             alert('我是异步代码，不会阻塞后面的代码执行')
                    
        //         }, 1000);
        //     }
        //     fn()
        //     console.log("333");


            // 异步：异步操作方式  js 
                // 1：回调  callback函数   cb
                // 2：Promise 
                // 3: generator函数   KOA     
                // 4: async函数       KOA2     node+mongoosedb     express   KOA   KOA2主流
                // 5: 事件触发方法   
            
            function count(a,b,callback) {
                // 两秒后返回a+b的结果
                setTimeout(() => {
                    // console.log(a+b)
                    // return a+b
                    callback(a+b)
                }, 0);
            }

           console.log(count(10,20,function (p) {  console.log('时间一到计算完了',p) }));


            // 事件触发方法 
            document.querySelector("#btn").onclick = function () {
                console.log("事件触发方法是异步的");
                
            }
            

    </script>
</body>
</html>